'use client'

import Search from '@/components/home/Search'
import '@/app/page.css'

import Navbar from '@/components/home/Navbar'
import Footer from '@/components/common/Footer'
import Features from '@/components/home/Features'
import LiveInsights from '@/components/home/LiveInsights'
import DeckOverview from '@/components/home/DeckOverview'
import ProcessFlow from '@/components/home/ProcessFlow'
import Pricing from '@/components/home/Pricing'
import CallToAction from '@/components/home/CallToAction'

export default function Home() {
  return (
    <div className="relative w-full h-screen overflow-auto bg-black">
      <div className="bg">
        <div
          className="particle"
          style={{
            height: '10.231px',
            width: '10.231px',
            top: '94.334%',
            left: '8.84534%',
            animationDelay: '3.61725s'
          }}></div>
        <div
          className="particle"
          style={{
            height: '7.21255px',
            width: '7.21255px',
            top: '20.3966%',
            left: '51.7779%',
            animationDelay: '8.29718s'
          }}></div>
        <div
          className="particle"
          style={{
            height: '7.49583px',
            width: '7.49583px',
            top: '25.1783%',
            left: '20.8297%',
            animationDelay: '6.94283s'
          }}></div>
        <div
          className="particle"
          style={{
            height: '6.1847px',
            width: '6.1847px',
            top: '74.1275%',
            left: '1.6258%',
            animationDelay: '4.33834s'
          }}></div>
        <div
          className="particle"
          style={{
            height: '4.92388px',
            width: '4.92388px',
            top: '83.8264%',
            left: '64.8086%',
            animationDelay: '3.47747s'
          }}></div>
        <div
          className="particle"
          style={{
            height: '7.38061px',
            width: '7.38061px',
            top: '43.8848%',
            left: '47.7714%',
            animationDelay: '6.96137s'
          }}></div>
        <div
          className="particle"
          style={{
            height: '10.0962px',
            width: '10.0962px',
            top: '7.20753%',
            left: '27.3728%',
            animationDelay: '6.63035s'
          }}></div>
        <div
          className="particle"
          style={{
            height: '8.43951px',
            width: '8.43951px',
            top: '43.7407%',
            left: '82.2203%',
            animationDelay: '9.47392s'
          }}></div>
        <div
          className="particle"
          style={{
            height: '5.67032px',
            width: '5.67032px',
            top: '55.7939%',
            left: '57.7487%',
            animationDelay: '6.22413s'
          }}></div>
        <div
          className="particle"
          style={{
            height: '8.81086px',
            width: '8.81086px',
            top: '75.3787%',
            left: '75.1232%',
            animationDelay: '4.72829s'
          }}></div>
        <div
          className="particle"
          style={{
            height: '10.2975px',
            width: '10.2975px',
            top: '64.3791%',
            left: '31.5022%',
            animationDelay: '5.86209s'
          }}></div>
        <div
          className="particle"
          style={{
            height: '8.94689px',
            width: '8.94689px',
            top: '76.2346%',
            left: '24.195%',
            animationDelay: '6.31588s'
          }}></div>
        <div
          className="particle"
          style={{
            height: '9.70445px',
            width: '9.70445px',
            top: '21.8848%',
            left: '89.1117%',
            animationDelay: '5.6183s'
          }}></div>
        <div
          className="particle"
          style={{
            height: '10.6606px',
            width: '10.6606px',
            top: '98.4412%',
            left: '46.9741%',
            animationDelay: '7.25017s'
          }}></div>
        <div
          className="particle"
          style={{
            height: '10.1255px',
            width: '10.1255px',
            top: '28.1311%',
            left: '25.5869%',
            animationDelay: '9.99785s'
          }}></div>
        <div
          className="particle"
          style={{
            height: '10.0126px',
            width: '10.0126px',
            top: '33.1844%',
            left: '42.3141%',
            animationDelay: '2.85962s'
          }}></div>
        <div
          className="particle"
          style={{
            height: '9.9477px',
            width: '9.9477px',
            top: '13.7969%',
            left: '7.02097%',
            animationDelay: '3.5271s'
          }}></div>
        <div
          className="particle"
          style={{
            height: '4.75461px',
            width: '4.75461px',
            top: '46.0296%',
            left: '41.6358%',
            animationDelay: '8.07788s'
          }}></div>
      </div>

      <Navbar />

      <div id="search">
        <Search />
      </div>

      <div id="features">
        <Features />
      </div>

      <div id="insights">
        <LiveInsights />
      </div>

      <div id="overview">
        <DeckOverview />
      </div>

      <div id="process">
        <ProcessFlow />
      </div>

      <div id="pricing">
        <Pricing />
      </div>

      <div id="cta">
        <CallToAction />
      </div>

      <Footer />
    </div>
  )
}
